<template>
  <view class="address-form">
    <view class="content">
      <uni-forms :rules="rules" :model="form" ref="formRef">
        <!-- 表单内容 -->
        <uni-forms-item name="receiver" class="form-item">
          <text class="label">收货人</text>
          <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
        </uni-forms-item>
        <uni-forms-item name="contact" class="form-item">
          <text class="label">手机号码</text>
          <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
        </uni-forms-item>
        <uni-forms-item name="fullLocation" class="form-item">
          <text class="label">所在地区</text>
          <picker class="picker" mode="region" :value="form.fullLocation" @change="onRegionChange">
            <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
            <view v-else class="placeholder">请选择省/市/区(县)</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item name="address" class="form-item">
          <text class="label">详细地址</text>
          <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
        </uni-forms-item>
        <uni-forms-item name="isDefault" class="form-item">
          <label class="label">设为默认地址</label>
          <switch
            class="switch"
            color="#27ba9b"
            :checked="form.isDefault == 1 ? true : false"
            @change="onSwitchChange"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button class="button" @tap="onSubmit">保存并使用</button>
  </view>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressByIdAPI } from './request'
// 通过id判断是新增地址还是修改地址
const query = defineProps<{
  id: string
}>()
// 动态设置导航标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

// 选择地区
const onRegionChange: UniHelper.PickerViewOnChange = (ev) => {
  form.value.fullLocation = ev.detail.value.join(' ')
  // 省市区(后端参数)
  const [provinceCode, cityCode, countyCode] = ev.detail.code!
  // 合并数据
  Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// 切换默认地址
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.isDefault = ev.detail.value == true ? 1 : 0
}
// 提交表单
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value?.validate?.() //
    if (query.id) {
      await putMemberAddressByIdAPI(query.id, form.value)
    } else {
      await postMemberAddressAPI(form.value)
    }
    // 成功提示
    uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } catch (error) {
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}
// 首收获地址详情
const getMemberAddressByIdData = async () => {
  if (query.id) {
    const res = await getMemberAddressByIdAPI(query.id)
    // 合并form表单
    Object.assign(form.value, res.result)
  }
}
// 获取表单组件实例，用于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>()
// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  fullLocation: {
    rules: [{ required: true, errorMessage: '请选择所在地区' }],
  },
  address: {
    rules: [{ required: true, errorMessage: '请选择详细地址' }],
  },
}

// 页面加载
onLoad(() => {
  getMemberAddressByIdData()
})
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}
.form-item {
  display: flex;
  align-items: center;
  min-height: 96rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  margin-bottom: 0;
}
.label {
  width: 200rpx;
  color: #333;
}
.uni-forms-item__content {
  display: flex;
}
.uni-forms-item {
  border-bottom: 1rpx solid #ddd;
}
.uni-forms {
  padding-top: 40rpx;
}
.uni-forms-item:last-child {
  border: none;
}
.input {
  flex: 1;
  display: block;
  height: 46rpx;
}
.switch {
  position: absolute;
  right: -20rpx;
  transform: scale(0.8);
}
.placeholder {
  color: #808080;
}
.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
.form-item:last-child {
  border: none;
}
</style>
